<template>
  <div class="zc-box">
    <el-dialog
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="visible"
      class="avue-dialog"
      @close="cancel"
      width="40%"
    >
      <avue-form ref="form" v-model="newValue" :option="optionsx"> </avue-form>
      <span slot="footer" class="dialog-footer">
        <el-button :disabled="buttonLoaindg" @click="cancel">{{
          cancelText
        }}</el-button>
        <el-button :loading="buttonLoaindg" type="primary" @click="submit">{{
          submitText
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    // 显示隐藏
    showDialog: {
      type: Boolean,
      default: false,
    },
    // 配置参数
    options: {
      type: Object,
    },
    // 表单数据
    value: {
      type: Object,
    },
    title: {
      type: String,
      default: "编辑",
    },
    submitText: {
      type: String,
      default: "确定",
    },
    cancelText: {
      type: String,
      default: "取消",
    },
  },
  computed: {
    newValue: {
      get: function () {
        return this.value;
      },
      set: function (value) {
        this.$emit("input", value);
      },
    },
    visible: {
      get: function () {
        return this.showDialog;
      },
      set: function (value) {
        this.$emit("update:showDialog", value);
      },
    },
  },

  data() {
    return {
      done: null, // 函数
      buttonLoaindg: false, // 按钮loading
      optionsx: this.options, // 配置项
    };
  },
  methods: {
    // 关闭弹窗
    cancel() {
      this.buttonLoaindg = false;
      this.done ? this.done() : "";
      this.$refs.form.resetForm();
      this.$emit("update:showDialog", false);
    },

    // 提交表单
    submit() {
      this.$refs.form.validate((vaild, done) => {
        if (vaild) {
          this.buttonLoaindg = true;
          this.done = done;
          // 双向绑定值，拷贝，关闭弹窗会改变值
          let obj = { ...this.value };
          this.$emit("submit", obj, this.cancel);
        }
      });
      console.log("ok");
    },
  },
};
</script>

<style lang="scss" scoped>
.zc-box {
  width: 100%;
  height: 100%;
}
</style>